{% extends "layout_index.html" %}

{% load static %}

{% block title %}
    <title>年级信息</title>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/grade.css' %}">
{% endblock %}

{% block main_content %}
    <div class="grade-info-container">
        <div class="grade-info-title">
            <h3>软件工程学院年级信息</h3>
        </div>
        <div class="container-fluid">
            <!-- 年级列表 -->
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th width="10%">序号</th>
                        <th width="30%"><i class="fa-solid fa-id-card"></i> 年级</th>
                        <th width="30%"><i class="fa-solid fa-calendar"></i> 年级届次 <small
                                class="text-muted">(点击编辑)</small></th>
                        <th width="15%"><i class="fa-solid fa-building"></i> 班级数</th>
                        <th width="15%"><i class="fa-solid fa-users"></i> 学生数</th>
                    </tr>
                    </thead>
                    <tbody id="gradeTableBody">
                    {% for stat in grade_stats %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ stat.grade.get_grade_id_display }}</td>
                            <td>
                                <div class="grade-year-container">
                                    <span class="grade-year">{{ stat.grade.grade_year }}</span>
                                    <i class="fa-solid fa-pen-to-square edit-icon" title="点击编辑"></i>
                                    <div class="edit-controls">
                                        <input type="text" class="form-control grade-year-input"
                                               value="{{ stat.grade.grade_year }}">
                                        <div class="btn-group">
                                            <button class="btn btn-success save-grade-year"
                                                    data-grade-id="{{ stat.grade.grade_id }}" title="保存">
                                                <i class="fa-solid fa-check"></i> 保存
                                            </button>
                                            <button class="btn btn-danger cancel-edit" title="取消">
                                                <i class="fa-solid fa-times"></i> 取消
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>{{ stat.class_count }}</td>
                            <td>{{ stat.student_count }}</td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="5" class="text-center">暂无年级信息</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {
            // 点击年级届次或编辑图标时显示编辑框
            $('.grade-year, .edit-icon').click(function () {
                var $container = $(this).closest('.grade-year-container');
                $container.find('.grade-year, .edit-icon').hide();
                $container.find('.edit-controls').show();
                $container.find('.grade-year-input').focus();
            });

            // 取消编辑
            $('.cancel-edit').click(function () {
                var $container = $(this).closest('.grade-year-container');
                $container.find('.grade-year, .edit-icon').show();
                $container.find('.edit-controls').hide();
            });

            // 保存修改
            $('.save-grade-year').click(function () {
                var $container = $(this).closest('.grade-year-container');
                var gradeId = $(this).data('grade-id');
                var newYear = $container.find('.grade-year-input').val();
                var $gradeYear = $container.find('.grade-year');

                if (!newYear.trim()) {
                    alert('年级届次不能为空！');
                    return;
                }

                $.ajax({
                    url: '{% url "update_grade_year" %}',
                    method: 'POST',
                    data: {
                        'grade_id': gradeId,
                        'grade_year': newYear,
                        'csrfmiddlewaretoken': '{{ csrf_token }}'
                    },
                    success: function (response) {
                        if (response.status === 'success') {
                            $gradeYear.text(newYear);
                            $gradeYear.show();
                            $container.find('.edit-icon').show();
                            $container.find('.edit-controls').hide();
                            alert('修改成功！');
                        } else {
                            alert('修改失败：' + response.message);
                        }
                    },
                    error: function (xhr) {
                        alert('修改失败：' + (xhr.responseJSON ? xhr.responseJSON.message : '未知错误'));
                    }
                });
            });

            // 按回车键保存
            $('.grade-year-input').keypress(function (e) {
                if (e.which === 13) {
                    $(this).closest('.edit-controls').find('.save-grade-year').click();
                }
            });
        });
    </script>
{% endblock %}


        
